<template>
    <div>
        <yd-scrolltab v-if="gallery.length">
            <yd-scrolltab-panel v-for="dept in gallery" :label="dept.name" :key="dept.name">
                <yd-grids-group :rows="3">
                    <yd-grids-item v-for="gal in dept.galleries" :key="gal.gallery_id" @click.native="showDetail(gal)">
                        <img slot="icon" :src="galleryFace(gal)">
                        <span slot="text">{{ gal.gallery_title }}</span>
                        <span slot="else" class="galleryInfo">{{ gal.gallery_date }}</span>
                    </yd-grids-item>
                </yd-grids-group>
            </yd-scrolltab-panel>
        </yd-scrolltab>

        <div v-else>
            <p class="prompt">
                <span>没有内容</span>
            </p>
        </div>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            channel: channelId(this.$route.path),
            showGallery: false,
            galleryInfo: {}
        }
    },
    created () {
        this.$store.dispatch('getGallery', {channel: this.channel, resolve: (data) => {

        }})
    },
    computed: {
        gallery () {
            const list = this.$store.getters.galleryList.list
            return _.map(
                _.groupBy(list, 'gallery_dept'),
                (item, prop) => {
                    return {name: prop, galleries: item}
                }
            )
        }
    },
    methods: {
        galleryFace (gal) {
            if(gal.image_list && gal.image_list[0]) {
                return gal.image_list[0].url
            }
        },
        showDetail (gal) {
            this.$router.push({name: 'gallery', params: {id: gal.gallery_id}})
        }
    }
}
</script>

<style scoped>
.yd-grids-item {
    padding: .35rem .1rem;
    font-size: .28rem;
}
.yd-grids-3 .yd-grids-item:not(:nth-child(3n)):before {
    border-right: 0;
}
.yd-grids-icon {
    height: 2rem;
    border-radius: .1rem;
    padding-bottom: .3rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.yd-grids-icon img {
    border-radius: .1rem;
}
.yd-scrolltab-active {
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.yd-scrolltab-nav {
    width: 1.42rem;
}
.yd-scrolltab-icon {
    display: none;
}
.yd-scrolltab-title {
    font-size: .28rem;
}
.galleryInfo {
    top: -.8rem;
    position: relative;
    font-size: .28rem;
    color: #ccc;
    padding-left: .2rem;
}
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
</style>